<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div>{{name}}</div>
    <div>姓名：{{user.name}}</div>
    <div>年龄：{{user.age}}</div>
    <div>性别：{{user.gender}}</div>
    <el-button @click="updateUser">修改</el-button>
    <div v-for="item in list" :key="item">{{item}}</div>
    <el-button @click="rUpdate">再次修改</el-button>
    <div>x:{{x}}</div>
    <div>y:{{y}}</div>
    <div>open:{{open}}</div>
    <div>close:{{close}}</div>
    <el-button type="primary" ref="btn">按钮的ref</el-button>
    <button type="primary" @click="name='拉拉'" ref="btnRef">ref另一用法</button>
  </div>
</template>

<script lang="ts">
import { defineComponent ,reactive,ref, toRefs, onMounted} from 'vue'
import usePagePosition from '@/hooks/usePagePosition'
export default defineComponent({
  setup(props,context) {
    //props 是一个对象 父组件向子组件传递的所有属性集合
    //context 是一个对象 包括 attrs emit(分发事件 子传父) slots
    // this ==> undefined 在组件创建前执行 此时没有this
    const {attrs,emit,slots} = context;
    const name = ref("小红")//ref监测基本类型变量
    const user = reactive({
      name:"小明",
      age:18,
      gender:"男"
    })//reactive 监测对象
    console.log(user)
    const list = reactive([1,2,3])
    const updateUser = ()=>{
      user.name = "王五",
      user.age = 89,
      user.gender = "未知"
      list[0] = 100;
    }
    //hooks 方法 
    const {x,y} = usePagePosition();
    //toRefs 可以把一个响应式的对象转化成一个普通对象，该对象中的每一个property都是一个ref
    const state = reactive({
      open:"1231",
      close:"2342"
    })
    const state1 = toRefs(state)
    setTimeout(()=>{
      //open 转成了ref 所以用
      // state.open.value = true;
      state1.open.value += "=="
    },1000)
    //ref 获取元素
    const btnRef = ref<HTMLElement|null>(null)
    const btn = ref<HTMLElement|null>(null)
    onMounted(()=>{
      console.log( btnRef.value)
      console.log(btn.value)
      btnRef.value && btnRef.value.click();
    })
    return{
      name,
      btn,
      user,
      updateUser,
      list,
      ...state1,
      x,
      y,
      btnRef
    }
  },
  data(){
    return {
      name:"2323"// 与setup中的属性同名 setup优先  一般vue3用setup 不使用data和methods
    }
  },
  methods:{
    rUpdate(){
      //对比vue2 $set方便的多
      this.list[2] = 200;
    }
  }
})
</script>

